<template>
  <div class="userlist">
    <el-input placeholder="🔍请输入内容" v-model="keywords" clearable></el-input>
    <span class="time">时间:{{spdate}}</span>
    <span class="sbqk">{{ysb}}/{{gsnumber}}</span>
    <!-- add by qzn start -->
    <div v-if="informationAll=='调查员'" class="titletools">
      <a :class="{active:dbFlag}"  class="mui-control-item mui-active" @tap="dbqy">
        <!--class="['mui-control-item', item.id==0? 'mui-active':'']"  @tap=""-->
        代报业户
      </a>
      <a :class="{active:!dbFlag}" class="mui-control-item" @tap="wdbqy">未代报业户</a>
    </div>
    <!-- add by qzn end -->
    <ul class="mui-table-view" v-for="(item,i) in search(keywords)" :key="item.recid">
      <li v-if="dbFlag==true&&item.reportedByOther==1" class="mui-table-view-cell">
        <router-link
          :to="{path:'/home/yhinfo/:id/:companyState/:reportedByOther/:information/:samplestatus',query:{id:item.recid,companyState:item.companyState,reportedByOther:item.reportedByOther,information:informationAll,samplestatus:item.samplestatus}}"
          class="mui-navigate-right"
        >
          <span
            class="company"
            v-if="item.reportedByOther==1&&informationAll=='业户'"
          >{{item.companyName}}(被代报)</span>
          <span
            class="company"
            v-if="item.reportedByOther==1&&informationAll=='调查员'"
          >{{item.companyName}}(代报)</span>
          <span class="company" v-if="item.reportedByOther==0">{{item.companyName}}</span>
          <!--0:未上报1:已上报待审批2:审定通过3:驳回4:取回-->
          <span class="fonts">{{item.samplestatus}}</span>
        </router-link>
      </li>
       <li v-if="dbFlag==false&&item.reportedByOther==0" class="mui-table-view-cell">
        <router-link
          :to="{path:'/home/yhinfo/:id/:companyState/:reportedByOther/:information/:samplestatus',query:{id:item.recid,companyState:item.companyState,reportedByOther:item.reportedByOther,information:informationAll,samplestatus:item.samplestatus}}"
          class="mui-navigate-right"
        >
          <span
            class="company"
            v-if="item.reportedByOther==1&&informationAll=='业户'"
          >{{item.companyName}}(被代报)</span>
          <span
            class="company"
            v-if="item.reportedByOther==1&&informationAll=='调查员'"
          >{{item.companyName}}(代报)</span>
          <span class="company" v-if="item.reportedByOther==0">{{item.companyName}}</span>
          <!--0:未上报1:已上报待审批2:审定通过3:驳回4:取回-->
          <span class="fonts">{{item.samplestatus}}</span>
        </router-link>
      </li>
      
    </ul>
    <div
      v-if="isShowSelect"
      style="background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; bottom: 0; position: fixed; z-index: 99999;"
    >
      <div
        @click.stop="isShowSelect=!isShowSelect"
        style="background-color: rgba(255,255,255,0.3); width: 100%;height: 75%; bottom: 25%;"
      ></div>
      <mt-picker
        style="background-color: white; width: 100%; height: 25%;bottom: 0; position: absolute;"
        :slots="slots"
        @change="onValuesChange"
      ></mt-picker>
    </div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      ysb: 0,
      gsnumber: 0,
      spdate: 0,
      keywords: "",
      schemeId: "",
      schemeName: "上报",
      resultList: [],
      companyState: "",
      information: "",
      informationAll: "",
      username: "",
      isShowSelect: "",
      // 判断代报和未代报选项卡是否显示 add by qzn 20190625
      dbFlag: true
    };
  },
  watch: {
    resultList(newVal) {
      // 数据加载成功，关闭加载提示框 add by qzb  20190625
      // if (newVal != []) {
      //   Indicator.close();
      // }
      Indicator.close();
    }
  },
  created() {},
  mounted() {
    //回到企业列表页，清除所有到两个定时器
    clearInterval(this.$store.state.hyclitervalId);
    clearInterval(this.$store.state.intervalId);
    this.getAllSampleList();
    Indicator.open({
      text: "加载中...",
      spinnerType: "fading-circle"
    });
  },
  methods: {
    getAllSampleList() {
      localStorage.setItem("selectInfo","");
      localStorage.setItem("selectInfoCode","");
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/scheme/getSampleList",
          {
            data: {
              name: localStorage.getItem("userName")
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(result => {
          console.log(result);
          if (result.data.status === "1000") {
            console.log(result);
            Toast("获取企业列表成功");
            this.spdate = result.data.data.dateTime;
            //排序
            this.resultList = result.data.data.sampleList;
            this.informationAll = result.data.data.information;
            if(this.informationAll=='业户'){
              this.dbFlag =false;
            }
            this.resultList.forEach(item => {
              console.log(item);
              if (item.samplestatus == "已上报") {
                this.ysb++;
              }
              this.gsnumber++;
            });
          } else if (result.data.status === "1001") {
            Indicator.close();
            Toast(result.data.msg);
          } else if (
            result.data.status == "4001" ||
            result.data.status == "5005" ||
            result.data.status == "1002"
          ) {
            Indicator.close();
            this.dateFlag = true;
            this.sessionId = "";
            localStorage.setItem("sessionId", JSON.stringify(this.sessionId));
            this.$store.commit("outLogin");
            this.msg = result.data.msg;
            Toast(this.msg);
            this.$router.push({
              path: "/login"
            });
          } else if (result.data.status == "5001") {
            Indicator.close();
            Toast(result.data.msg);
          }
          // 没有数据关闭加载提示框~ add by qzb 20190625
        });
    },
    search(keywords) {
      return this.resultList.filter(item => {
        // if(item.name.indexOf(keywords) != -1)
        // 注意 在 ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符名称')
        //  如果包含，则返回 true ，否则返回 false
        //  contain
        if (item.companyName.includes(keywords)) {
          return item;
        }
      });
    },
    getData() {
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/user/getuserinfo",
          { data: {} },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            if (result.data.status == "1000") {
              this.username = result.data.data.userName;
              this.phoneNumber = result.data.data.phone;
              this.roles = result.data.data.userInfoRoles;
              localStorage.setItem("userName", result.data.data.userName);
            }
          },
          error => {
            console.log(
              "UserListContainer.vue:getuserinfo request error:" + error
            );
          }
        );
    },
    dbqy() {
      this.dbFlag = true;
      this.msg = "dlhys";
    },
    wdbqy() {
      this.dbFlag = false;
      this.dlhyFlag = false;
      this.msg = "hycl";
    }
  }
};
</script>

<style lang="scss" scoped>
mt-header {
  z-index: 999;
  /*padding-top: 20px;*/
}

.mint-header {
  height: 40px;
  /*padding-top: 30px;*/
}

.userlist {
  height: 100%;
  width: 100%;
  /*padding-top: 80px;*/
  padding-top: 10px;
  /*padding-top: 20px;*/
  .fonts {
    font-size: 14px;
    color: #226aff;
    /* display: flex;
            justify-content:space-between; */
    /* margin: 0 10% 0 50%;
            display: inline-block;   */
    float: right;
    margin-right: 10%;
  }
  .time {
    font-size: 14px;
    color: #226aff;
    margin: 0 0 0 3%;
  }
  .sbqk {
    font-size: 14px;
    color: #226aff;
    margin: 0 0% 0 60%;
  }
  .company {
    font-size: 13px;
    color: #030303;
  }
  .mui-table-view-cell > a:not(.mui-btn).mui-active {
    background-color: #fff;
  }
  .morebutton {
    margin-bottom: 3%;
  }
  .el-input__icon {
    height: 70%;
    width: 25px;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    line-height: 40px;
  }
  // add by qzn  start
  .titletools {
    display: flex;
    justify-content: space-around;
    height: 40px;
    padding-top: 2%;
    background: #ffffff;
    margin-bottom: 2%;
  }

  a {
    text-decoration: none;
    color: #050505;
  }

  .active {
    text-decoration: none;
    color: #007aff;
    border-bottom: 2px solid #007aff;
  }

  .buttons {
    position: fixed;
    /*top: 85%;*/
    /*left: 75%;*/
    bottom: 60px;
    right: 50px;
    width: 60px;
    height: 60px;
  }

  .buttomlist {
    background-color: #007aff;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    color: azure;
  }

  .toolfont {
    margin-bottom: 40%;
  }
  // add by qzn end
}
</style>